<template>
    <div class="container">
        <div class="upload">
            <div>
                <div :class="{'filebox':true,'isUpload':uploadBtnDisabled?'isUpload':''}">
                <input type="file" @change="fileChange($event)" class="filebtn" >
                <div class="flletit">选择视频</div>
                </div>
                <div class="filetitle">{{fileTitle}}</div>
                <label class="status">上传状态: <span>{{statusText}}</span></label>
                <a-progress :percent="percent" status="active" />
            </div>
            <div class="upload-type">
                <a-button slot="trigger" size="small" type="primary"  @click="authUpload" :disabled="uploadDisabled">开始上传</a-button>
            </div>
        </div>
  </div>
</template>
<script>
import {getAliyunInfo,getRefreshAliyunInfo} from "@/request/api"
import "../../../lib/aliyun-upload-sdk-1.5.0.min.js"
import "../../../lib/aliyun-oss-sdk-5.3.1.min.js"
export default {
    name:"uploadVideo",
    data () {
    return {
      vid: '',
      fileTitle: '',
      timeout: '',
      partSize: '',
      parallel: '',
      retryCount: '',
      retryDuration: '',
      region: 'cn-shanghai',
      userId: '35298924',
      file: null,
      authProgress: 0,
      uploadDisabled: true,
      uploadBtnDisabled:false,
      resumeDisabled: true,
      pauseDisabled: true,
      uploader: null,
      statusText: '',
      percent:0,
    }
  },
  methods: {
    emitEventVod () {
        this.authProgress = 0
        this.fileTitle = ''
        this.statusText = ''
        this.pauseDisabled = true
        this.resumeDisabled = true
        this.uploadDisabled = true
        this.uploadBtnDisabled=true
    },
    fileChange (e) {
        this.file = e.target.files[0]
        if (!this.file) {
            this.$message.error('请先选择需要上传的文件!')
            return
        }
        if (this.file.type !== 'video/mp4') {
            this.$message.error('请选择.mp4文件!')
            return
        }
        this.fileTitle = this.file.name
        var userData = '{"Vod":{}}'
        if (this.uploader) {
            this.uploader.stopUpload()
            this.authProgress = 0
            this.statusText = ''
        }
        this.uploader = this.createUploader()
        this.uploader.addFile(this.file, null, null, null, userData)
        this.uploadDisabled = false
        this.uploadBtnDisabled=false
        this.pauseDisabled = true
        this.resumeDisabled = true
    },
    authUpload () {
        // 然后调用 startUpload 方法, 开始上传
        if (this.uploader !== null) {
            this.uploader.startUpload()
            this.uploadDisabled = true
            this.uploadBtnDisabled=true
            this.pauseDisabled = false
            this.$emit('upload',true)
        }
    },
    // 暂停上传
    pauseUpload () {
        if (this.uploader !== null) {
            this.uploader.stopUpload()
            this.resumeDisabled = false
            this.pauseDisabled = true
        }
    },
    // 恢复上传
    resumeUpload () {
        if (this.uploader !== null) {
            this.uploader.startUpload()
            this.resumeDisabled = true
            this.pauseDisabled = false
        }
    },
    createUploader (type) {
        // eslint-disable-next-line
        let uploader = new AliyunUpload.Vod({
        region: this.region,
        userId: this.userId,
        // 添加文件成功
        addFileSuccess:  (uploadInfo)=>{
            this.uploadDisabled = false
            this.uploadBtnDisabled=false
            this.resumeDisabled = false
            this.statusText = '添加文件成功, 等待上传...'
            this.$emit('waitUploading',false)
        },
        // 开始上传
        onUploadstarted: (uploadInfo)=>{
            // if(!uploadInfo.videoId) {
                let title = uploadInfo.file.name.substr(0, uploadInfo.file.name.lastIndexOf('.'))
                getAliyunInfo({title: title, fileName: uploadInfo.file.name}).then(res=>{
                    let uploadAuth = res.data.UploadAuth
                    let uploadAddress = res.data.UploadAddress
                    let videoId = res.data.VideoId
                    this.vid = res.data.VideoId
                    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
                })
                this.statusText = '文件开始上传...'
            // }else{
            //     getRefreshAliyunInfo({ videoId: uploadInfo.videoId }).then(res=>{
            //         let uploadAuth = res.data.UploadAuth
            //         let uploadAddress = res.data.UploadAddress
            //         let videoId = res.data.VideoId
            //         this.vid = res.data.VideoId
            //         uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
            //     })
            //     this.statusText = '文件开始上传...'
            // }
        },
        // 文件上传成功
        onUploadSucceed:()=>{
            this.statusText = '文件上传成功!'
            this.$emit('onUploadSucceed')
        },
        // 文件上传失败
        onUploadFailed:()=>{
            this.statusText = '文件上传失败!'
        },
        // 取消文件上传
        onUploadCanceled:()=>{
            this.statusText = '文件已暂停上传'
        },
        // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
        onUploadProgress:(uploadInfo, totalSize, progress)=>{
            let progressPercent = Math.ceil(progress * 100)
            this.percent = progressPercent
            this.authProgress = progressPercent
            this.statusText = '文件上传中...'
            
        },
        // 上传凭证超时
        onUploadTokenExpired:(uploadInfo)=>{
            getRefreshAliyunInfo({ videoId: uploadInfo.videoId }).then(res=>{
                let uploadAuth = res.data.UploadAuth
                uploader.resumeUploadWithAuth(uploadAuth)
            })
            this.statusText = '文件超时...'
        },
        // 全部文件上传结束
        onUploadEnd:()=>{
            this.statusText = '文件上传完毕'
            localStorage.setItem('videoUrl',this.vid)
            this.$emit('uploadSuccess',false)
        }
      })
      return uploader
    },
    }
}
</script>
<style lang="stylus" scoped>
.isUpload{
    .filebtn{
        z-index:-1
    }
    .flletit{
        background-color: #ddd;
        color:#999;
    }
}
.filebox{
    width: 80px;
    height: 32px;
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
    position: relative;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
  }
  .filebox .filebtn{
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    position: absolute;
    top: 0;
    opacity: 0;

  }
 .filebox .flletit{
   width: 100%;
   height: 100%;
 }
</style>